<template>
    <div class="hello">
    <div id="cesiumContainer" style="position: relative;">
        <div class="drew">
            <el-tooltip content="点"  placement="bottom" popper-class="testtooltip">
                <el-tag @click="drewPoint(1)" :type="index==1 ? '' : 'info'" :effect="index===1 ?'dark':'plain'">
                    <span class="iconfont icon-yuan"></span>
                </el-tag>
            </el-tooltip>   
            <el-tooltip content="线"  placement="bottom" popper-class="testtooltip ">
                <el-tag @click="drewLine(2)" :type="index==2 ? '' : 'info'" :effect="index===2 ?'dark':'plain'">
                    <span class="iconfont icon-xian"></span>
                </el-tag>
            </el-tooltip>        
            <el-tooltip content="面"  placement="bottom" popper-class="testtooltip ">
                <el-tag @click="drewPolygon(4)" :type="index==4 ? '' : 'info'" :effect="index===4 ?'dark':'plain'">
                    <span class="iconfont icon-mian"></span>
                </el-tag>
            </el-tooltip>        
            <el-tooltip content="清除"  placement="bottom" popper-class="testtooltip ">
                <el-tag @click="removeInputAction(7)" :type="dIndex==7 ? '' : 'info'" :effect="dIndex===7 ?'dark':'plain'">
                    <span class="iconfont icon-shanchu"></span>
                </el-tag> 
            </el-tooltip>              
        
        </div>
    </div>
  </div>
</template>
<script>
export default{
    name:'LoadBaseMap',
    data(){
        return{
            viewer:{},
            inter:null,
            index:-1,
            dIndex:0,
            handler:null,
        }
    },
    mounted() {
        /**
         *初始化cesium
         */
        this.initCesium(); 
    },
    methods:{
         /**
         * 
         * 初始化cesium
         * 
         */
        initCesium(){
            // mapbox 风格：https://docs.mapbox.com/api/maps/styles/#mapbox-styles
            var mapbox1 = new Cesium.MapboxStyleImageryProvider({
                styleId: 'dark-v10',
                accessToken: 'pk.eyJ1Ijoienh0d24iLCJhIjoiY2wzanV3bHduMTZwejNrcXcyd3B1bzBieiJ9.aW_TDqLomftwPvBu7OWqwQ',
            })
            Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxOThkNmNmNS1jMjYxLTQzNDMtYjFiOC1kYTU2MGZmYzNhZjUiLCJpZCI6Njg3MjYsImlhdCI6MTY0MDIyNzMzOH0.Hq7YWBI3wJUCtpJfmrb_kQ8dtN5hn-M3km-NG_SsPiQ';
            this.viewer = new Cesium.Viewer('cesiumContainer',{      
                geocoder:false,
                homeButton:false,
                sceneModePicker:false,
                baseLayerPicker:false,
                selectionIndicator: false,
                navigationHelpButton :false,//导航帮助按钮，显示默认的地图控制帮助
                animation:false,// 动画器件，控制视图动画的播放速度.
                timeline:false,//时间线,指示当前时间，并允许用户跳到特定的时间
                creditsDisplay:false,//版权显示，显示数据归属，必选
                infoBox: false,
                fullscreenButton:false,//关闭全屏按钮
                // 注释时相当于使用默认地形，解开注释相当于使用全球地形
                terrainProvider: Cesium.createWorldTerrain({
                    //基于太阳位置开启地形照明
                    requestVertexNormals: true,
                    //启用水体效果
                    requestWaterMask: true
                }),
                imageryProvider: mapbox1
            });
            // 隐藏版权信息
            this.viewer._cesiumWidget._creditContainer.style.display = "none";    // 隐藏版权信息
            this.viewer.scene.skyAtmosphere.show=true;    // 隐藏大气层,false, true开启
            this.viewer.scene.globe.enableLighting = true; //开启光照效果


            let that = this;
            this.viewer.scene.globe.enableLighting = true
            this.viewer.shadows = true
            this.viewer.terrainShadows = Cesium.ShadowMode.RECEIVE_ONLY
            this.viewer.shadowMap.darkness = 0.02 //阴影透明度--越大越透明
            let time = 0
    
            this.inter = setInterval(() => {
                // 改变时间设置光照效果
                let date = new Date().getTime() + time
                let utc = Cesium.JulianDate.fromDate(new Date(date))
                //北京时间
                that.viewer.clockViewModel.currentTime = Cesium.JulianDate.addHours(utc, 0, new Cesium.JulianDate())
                time = time + 1000 * 60
            }, 100)
            console.log(this.inter)
        },        
    },
}

</script>
<style scoped lang="scss">
.hello {
  height: 100%;
  #cesiumContainer {
    height: 100%;
  }
}
.drew{
    // width: 316px;
    height: 34px;
    border-radius: 5px;
    z-index: 4;
    position: absolute;
    left: 10px;
    top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 0 2pxrgba 0, 0, 0, 0.1;
}

</style>